<template>
    <div class="content">
      <div class="content-head">
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="addBtnEvent">添加</el-button>
      </div>
      <div class="content-table">
        <div class="table-info">产线关联物料设置</div>
        <el-table :data="tableData" v-loading="tableLoading" style="width: 100%;" :max-height="tableMaxHeight" class="content-table-item">
          <!-- <el-table-column prop="workshopCode" label="车间编码" width="" align="center"></el-table-column> -->
          <el-table-column prop="workshop" label="车间名称" width="" align="center">
            <template slot-scope="scope" slot="header">
              <table-head-filter label="车间名称" type="input" :bindData="formData.workshop" filterField="workshop" @change="filterChangeEvent"></table-head-filter>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="workCenterId" label="工作中心Id" width="" align="center"></el-table-column> -->
          <el-table-column prop="workCenterName" label="工作中心" width="" align="center">
            <template slot-scope="scope" slot="header">
              <table-head-filter label="工作中心" type="input" :bindData="formData.workCenterName" filterField="workCenterName" @change="filterChangeEvent"></table-head-filter>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="productionBasicUnitNumber" label="产线编码" width="" align="center"></el-table-column> -->
          <el-table-column prop="productionBasicUnit" label="产线名称" width="" align="center"></el-table-column>
          <el-table-column prop="productionBasicUnitNickName" label="产线昵称" width="" align="center">
            <template slot-scope="scope" slot="header">
              <table-head-filter label="产线昵称" type="input" :bindData="formData.productionBasicUnitNickName" filterField="productionBasicUnitNickName" @change="filterChangeEvent"></table-head-filter>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态" width="" align="center">
            <template slot-scope="{ row,$index }">
              <el-tag>{{ dealState(row.state) }}</el-tag>
            </template>
            <template slot-scope="scope" slot="header">
              <table-head-filter label="状态" type="select" :bindData="formData.state" filterField="state" @change="filterChangeEvent" 
                :alternativeOption="['创建','生效','完成','关闭','取消']">
              </table-head-filter>
            </template>
          </el-table-column>
          <el-table-column prop="materialCode" label="物料编码" width="" align="center"></el-table-column>
          <el-table-column prop="materialName" label="物料名称" width="" align="center"></el-table-column>
          <el-table-column prop="createdDate" label="创建时间" width="180" align="center"></el-table-column>>
          <el-table-column prop="createdBy" label="创建人" width="" align="center"></el-table-column>
          <el-table-column prop="" label="操作" align="center" fixed="right" width="180">
            <template slot-scope="{row,$index}">
                <el-button type="text" size="mini" style="margin-right: 10px;" @click="changeState(row)" :disabled="row.state != 0">生效</el-button>
                <el-button type="text" size="mini" style="margin-right: 10px;" @click="editEvent(row)" :disabled="row.state == 1">编辑</el-button>
                <el-button type="text" size="mini" style="margin-right: 10px;" @click="examineEvent(row)">详情</el-button>
                <el-popconfirm title="确定删除吗？"  @confirm="deleteBtn(row)">
                  <el-button type="text" size="mini" slot="reference">删除</el-button>
                </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="content-footer">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,30,50,100]" :page-size="pageSize" background layout="prev, pager, next,total, sizes, jumper" :total="total"></el-pagination>
      </div>
    </div>
</template>
  
<script>
import TableHeadFilter from "@/components/tableHeadFilter/index.vue";
import { reqLineMaterialConfig,reqLineMaterialConfigUpdate,reqDeleteLineMaterialConfig } from "@/api/workOrder.js";
import T from "@/utils/tools.js";
export default {
    name:"ProductionLineMaterialSetting",  //产线关联物料设置
    components:{
      TableHeadFilter
    },
    data() {
      return {
        formData:{
          workshop:"",
          workCenterName:"",
          productionBasicUnitNickName:"",
          state:""
        },
        tableData:[],
        tableLoading:false,
        tableMaxHeight:450,
        currentPage:1,
        pageSize:20,
        total:0
      }
    },
    mounted(){
      this.getLineMaterialConfig();
      this.calculateTableMaxHeight();
      document.title = "产线关联物料设置";
      window.addEventListener("resize",this.calculateTableMaxHeight);
    },
    beforeDestroy() {
      window.removeEventListener("resize",this.calculateTableMaxHeight);
    },
    methods:{
      getLineMaterialConfig(){
        const parameter = { page:this.currentPage,size:this.pageSize,...this.formData };
        delete parameter.state;
        if(this.formData.state) parameter.state = this.dealStateNameToState(this.formData.state);
        this.tableLoading = true;
        reqLineMaterialConfig(parameter).then(response => {
          if(response.data.code === 200){
            this.tableData = response.data.data.content;
            this.total = response.data.data.totalElements;
          }
          this.tableLoading = false;
        }).catch(error => {
          this.tableLoading = false;
        })
      },
      changeState(row){
        const parameter = [{ id:row.id,state:1 }];
        reqLineMaterialConfigUpdate(parameter).then(response => {
          if(response.data.code === 200){
            this.$message({type:"success",message:"生效成功"});
            this.getLineMaterialConfig();
          }
        }).catch(error => {
          this.$message({type:"error",message:"操作失败，请稍后重试"});
        })
      },
      addBtnEvent(){
        this.$router.push({ name:"ProductionLineMaterialSettingEdit",query:{ type:0 } });
      },
      examineEvent(row){
        this.$router.push({ name:"ProductionLineMaterialSettingEdit",query:{ type:2,id:row.id,lineAlias:row.productionBasicUnitNickName } });
      },
      editEvent(row){
        this.$router.push({ name:"ProductionLineMaterialSettingEdit",query:{ type:1,id:row.id,lineAlias:row.productionBasicUnitNickName } });
      },
      deleteBtn(row){
        reqDeleteLineMaterialConfig(row.id).then(response => {
          if(response.data.code === 200){
            this.$message({type:"success",message:"删除成功"});
            this.getLineMaterialConfig();
          }
        }).catch(error => {
          this.$message({type:"error",message:"删除失败，请稍后重试"});
          console.log(error);
        })
      },
      handleCurrentChange(curPage){
        this.currentPage = curPage;
        this.getLineMaterialConfig();
      },
      handleSizeChange(pageSize){
        this.pageSize = pageSize;
        this.getLineMaterialConfig();
      },
      calculateTableMaxHeight(){
        const dom = document.querySelector(".content-table");
        this.$nextTick(() => {
          this.tableMaxHeight = dom.offsetHeight - 30;
        })
      },
      //tableHeadFiler的change事件
      filterChangeEvent(parameter){
        const { state, filterField, selectedValue } = parameter;
        if(state === 'clear'){
          //清空操作
          if(this.formData[filterField] !== ""){
            this.formData[filterField] = "";
            this.getLineMaterialConfig();
          }
        }
        if(state === 'confirm'){
          //确定操作
          this.formData[filterField] = selectedValue;
          if(selectedValue !== ""){
            this.getLineMaterialConfig();
          }
        }
      },
      dealState(status){
        status = Number(status);
        let desc = "";
        switch (status) {
          case 0:
            desc = "创建";
            break;
          case 1:
            desc = "生效";
            break;
          case 2:
            desc = "完成";
            break;
          case 3:
            desc = "关闭";
            break;
          case 4:
            desc = "取消";
            break;
          default:
            desc = "未知";
        }
        return desc;
      },
      dealStateNameToState(status){
        let state = 0;
        switch (status) {
          case '创建':
            state = 0;
            break;
          case '生效':
            state = 1;
            break;
          case '完成':
            state = 2;
            break;
          case '关闭':
            state = 3;
            break;
          case '取消':
            state = 4;
            break;
          default:
            break;
        }
        return state;
      },
    }
}
</script>
  
<style lang='scss' scoped>
  .content{
    width: 100%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
  
    .content-head{
      width:100%;
      height:40px;
    }
    .content-table{
      width:100%;
      height:calc(100% - 40px - 50px);
      .table-info{
        width:100%;
        height: 30px;
      }
    }
    .content-footer{
      width:100%;
      height:50px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
</style>